<template>
  <div>
    <common-head title="商品订单" />
    <van-contact-card
      :type="contactType"
      :name="orderContact.name"
      :tel="orderContact.tel"
      @click="onEdit"
    />
    <div class="order-wrap">
      <div v-for="item in orderGoods.items" :key="item.id" class="order-goods">
        <van-swipe-cell>
          <van-card
            :num="item.num"
            :price="item.minPrice"
            :desc="item.tags"
            :title="item.name"
            class="goods-card"
            :thumb="item.pic"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <van-submit-bar
      :price="orderGoods.totalPrice * 100"
      button-text="购买"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { mapState } from 'vuex'
export default {
  methods: {
    onEdit () {
      if (this.contactType === 'edit') {
      // 联系人列表
        this.$router.push('/contactLists')
      } else {
      // 增加联系人
      }
    },
    onSubmit () {
      if (confirm('您确定要购买吗？')) {
        alert('支付成功，等待收货吧')
      }
    }
  },
  created () {
    console.log(this.orderContact)
  },
  computed: {
    ...mapState({
      orderGoods: (state) => state.order.orderGoods,
      orderContact: (state) => state.order.orderGoods.orderContact
    }),
    contactType () {
      return this.orderContact ? 'edit' : 'add'
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.van-cell--clickable {
  padding-top: 50px;
}
.order-wrap {
  overflow: auto;
  .order-goods {
    margin-bottom: 10px;
    .delete-button {
      height: 100%;
    }
  }
}
</style>
